// import React, { useState } from 'react'
// import "./chat.scss"
import chatImg from '../logochat.png'
// import { Input, Button } from "antd-mobile";

// function chat() {
//   const [value, setValue] = useState("");
//   const [messagelist, setMessagelist] = useState([
//     {
//       from: "you",
//       content: [
//         <>
//           <p style={{ width: '80px' }}><a>问题列表1</a></p>
//           <p style={{ width: '80px' }}><a>问题列表2</a></p>
//           <p style={{ width: '80px' }}><a>问题列表3</a></p>
//           <p style={{ width: '80px' }}><a>问题列表4</a></p>
//         </>
//       ]
//     }, {
//       from: "you",
//       content:
//         "hah",
//     },
//     {
//       from: "me",
//       content: "你好",
//     },
//   ]);
//   let socket = new WebSocket("ws://localhost:8888");
//   socket.onopen = () => {
//     console.log("连接成功");
//   };
//   socket.onmessage = (e) => {
//     console.log(e.data);
//     messagelist.push({
//       from: "you",
//       content: e.data,
//     });
//     // 更新数据
//     setMessagelist([...messagelist]);
//     // 清空输入框
//     setValue("");
//   };
//   // 点击发送按钮，发送消息
//   const sendMsg = () => {
//     // 传递发送内容
//     socket.send(value);
//     // 将消息放到列表中渲染页面
//     messagelist.push({
//       from: "me",
//       content: value,
//     });
//     // 更新数据
//     setMessagelist([...messagelist]);
//     // 清空输入框
//     setValue("");
//   };

//   // 监听websocket关闭连接的事件
//   socket.onclose = () => {
//     socket = new WebSocket("ws://localhost:8888");
//   };
//   return (
//     <div style={{ width: '300px', height: '450px' }}>
//       {/* 标题 */}
//       <div className="chat_top">
//         <img src={chatImg} alt="" />
//         <p>创客贴机器人服务小助手</p>
//         <p>关闭</p>
//       </div>
//       {/* 内容 */}
//       <div className="chat_cen">
//         {messagelist.map((item, index) => {
//           return (
//             <div
//               key={index}
//               className={
//                 [
//                   item.from === "you" ? "you-messageitem" : "me-messageitem"
//                 ]
//               }
//             >
//                <img
//                   className={
//                     [item.from === "you" ? "customer-avatar" : "me-avatar"]
//                   }
//                   src={
//                     item.from === "you"
//                       ? "https://img2.baidu.com/it/u=140788575,4191915434&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1735146000&t=2c438a7e24c320d4ef4d987241c85ee0"
//                       : "https://img1.baidu.com/it/u=781435481,24052815&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1735146000&t=c9d83cb5fb55e7c586635d8f492a9a23"
//                   }
//                   alt=""
//                 />
//               <span
//                 className={
//                   [
//                     item.from === "you" ? "customer-message" : "me-message"
//                   ]
//                 }
//               >
//                 {item.content}
//               </span>
//             </div>
//           );
//         })}
//       </div>
//       {/* 输入部分 */}
//       <div className="chat_btn">
//         <Input
//           className={["send-input"]}
//           placeholder="请输入您遇到的问题"
//           value={value}
//           onChange={(val) => {
//             setValue(val);
//           }}
//           onKeyUp={(e) => {
//             if (e.keyCode === 13) {
//               sendMsg();
//             }
//           }}
//         />

//         <Button
//           color="primary"
//           fill="solid"
//           className={["send-btn"]}
//           onClick={sendMsg}
//         >发送</Button>
//       </div>
//     </div>
//   )
// }

// export default chat


/* eslint-disable no-undef */
import { useState } from "react";
import "./chat.scss"

import { Input, Button } from "antd-mobile";

// import useWebsocket from "./hooks/useWebsocket";

export default function Message() {
  const [value, setValue] = useState("");

  const [messagelist, setMessagelist] = useState([
    {
      from: "you",
      content: [
        <>
          <p style={{ width: '80px' }}><a>问题列表1</a></p>
          <p style={{ width: '80px' }}><a>问题列表2</a></p>
          <p style={{ width: '80px' }}><a>问题列表3</a></p>
          <p style={{ width: '80px' }}><a>问题列表4</a></p>
        </>
      ]
    }, 
    {
      from: "me",
      content: "你好",
    },{
      from: "you",
      content:
        "hah",
    },
  ]);

  let socket = new WebSocket("ws://localhost:8888");
  socket.onopen = () => {
    console.log("连接成功");
  };
  socket.onmessage = (e) => {
    console.log(e.data);
    messagelist.push({
      from: "you",
      content: e.data,
    });
    // 更新数据
    setMessagelist([...messagelist]);
    // 清空输入框
    setValue("");
  };
  // 点击发送按钮，发送消息
  const sendMsg = () => {
    // 传递发送内容
    socket.send(value);
    // 将消息放到列表中渲染页面
    console.log(value);
    
    messagelist.push({
      from: "me",
      content: value,
    });
    // 更新数据
    setMessagelist([...messagelist]);
    // 清空输入框
    setValue("");
  };

  // 监听websocket关闭连接的事件
  socket.onclose = () => {
    socket = new WebSocket("ws://localhost:8888");
  };
  return (
    <div className="chatbox">
      <div className={["message-box"]}>
        {/* 头部引入的标签栏 */}
        <div style={{ width: "100%", background: "blue", height: "50px", fontSize: "30px", backgroundColor: "whith" }}>
          <div className="chat_top">
            <img src={chatImg} alt="" />
            <p>创客贴机器人服务小助手</p>
            <p>关闭</p>
          </div>
        </div>
        {/* 头部标签可以传递颜色，然后使用三元判断符，bgColor='#fff' textColor='#000' */}

        <div className={["messagelist-box"]}>
          {/* 消息盒子*/}
          <div className={["messagelist"]}>
            {messagelist.map((item, index) => {
              return (
                <div
                  key={index}
                  className={
                    [
                      item.from === "you" ? "you-messageitem" : "me-messageitem"
                    ]
                  }
                >
                  <img
                    className={
                      [item.from === "you" ? "customer-avatar" : "me-avatar"]
                    }
                    src={
                      item.from === "you"
                        ? "https://ts3.cn.mm.bing.net/th?id=OIP-C.Dv-oeq6RRoZF6flcD1K4lwHaHZ&w=250&h=249&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
                        : "https://ts3.cn.mm.bing.net/th?id=OIP-C.4SPZVrcvZ-Tunx4G4FFtRAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
                    }
                    alt=""
                  />
                  <span
                    className={
                      [
                        item.from === "you" ? "customer-message" : "me-message"
                      ]
                    }
                  >
                    {item.content}
                  </span>
                </div>
              );
            })}

          </div>
        </div>
        {/* 底部操作栏 */}
        <div className={["send-box"]}>
          <Input
            className={["send-input"]}
            placeholder="请输入内容"
            value={value}
            onChange={(val) => {
              setValue(val);
            }}
            onKeyUp={(e) => {
              if (e.keyCode === 13) {
                sendMsg();
              }
            }}
          />

          <Button
            color="primary"
            fill="solid"
            className={["send-btn"]}
            onClick={sendMsg}
          >
            发送
          </Button>
        </div>
        {/* <HomeTabbar /> */}
      </div>
    </div>
  );
}
